{% extends 'layout.html' %}

{% block content %}
<div class="cashier-app bg-gray-100 min-h-screen flex flex-col">
  <!-- 顶部操作栏 -->
  <header class="bg-white shadow-sm py-3 px-4 flex justify-between items-center">
    <h1 class="text-xl font-bold text-gray-800">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      智能收银系统
    </h1>
    <div class="flex space-x-4">
      <div class="bg-blue-50 px-3 py-1 rounded-full text-sm flex items-center">
        <div class="w-2 h-2 bg-blue-600 rounded-full mr-2"></div>
        <span>收银员: {{ request.user.get_username }}</span>
      </div>
      <button id="shiftBtn" class="bg-gray-200 px-3 py-1 rounded-full text-sm hover:bg-gray-300 transition">
        交班
      </button>
    </div>
  </header>

  <!-- 主内容区 -->
  <div class="flex flex-1 overflow-hidden">
    <!-- 商品区 -->
    <div class="w-3/5 flex flex-col border-r border-gray-200 bg-white">
      <!-- 搜索和分类 -->
      <div class="p-4 border-b border-gray-200">
        <div class="flex mb-3">
          <div class="relative flex-1 mr-2">
            <input
              type="text" 
              id="searchInput"
              placeholder="输入商品名称/条码/编码..."
              class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              autofocus
            >
            <div class="absolute left-3 top-2.5 text-gray-400">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
          </div>
          <button id="scanBtn" class="px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            扫描
          </button>
        </div>
        
        <div class="category-tabs flex space-x-2 overflow-x-auto pb-1">
          <button class="category-btn px-3 py-1 rounded-full bg-blue-100 text-blue-800 whitespace-nowrap" data-id="all">
            全部商品
          </button>
          {% for category in categories %}
          <button class="category-btn px-3 py-1 rounded-full bg-{{ category.color }}-100 text-{{ category.color }}-800 whitespace-nowrap" 
                  data-id="{{ category.id }}" 
                  style="min-width: 5rem;">
            {{ category.name }}
          </button>
          {% endfor %}
        </div>
      </div>
      
      <!-- 商品网格 -->
      <div id="productsGrid" class="grid grid-cols-4 gap-4 p-4 overflow-y-auto flex-1">
        {% for product in Product_list %}
        <div class="product-card bg-white rounded-lg border border-gray-200 hover:shadow-md transition-all duration-200 relative group">
          <div class="p-3">
            <div class="font-medium text-gray-800 text-sm truncate">{{ product.name }}</div>
            <div class="flex justify-between items-center mt-2">
              <span class="text-lg font-bold text-blue-600">¥{{ product.price }}</span>
              {% if product.stock <= 0 %}
                <span class="text-xs px-1 py-0.5 bg-red-100 text-red-800 rounded">缺货</span>
              {% elif product.stock <= product.min_stock %}
                <span class="text-xs px-1 py-0.5 bg-orange-100 text-orange-800 rounded">仅{{ product.stock }}{{ product.unit }}</span>
              {% else %}
                <span class="text-xs text-gray-500">{{ product.stock }}{{ product.unit }}</span>
              {% endif %}
            </div>
            <div class="text-xs text-gray-400 mt-1 truncate">编码: {{ product.product_code }}</div>
          </div>
          <button class="add-product-btn absolute bottom-2 right-2 bg-blue-600 text-white p-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-md hover:bg-blue-700"
                  data-id="{{ product.id }}"
                  data-name="{{ product.name }}"
                  data-price="{{ product.price }}"
                  data-stock="{{ product.stock }}">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
        {% endfor %}
      </div>
    </div>

<<<<<<< HEAD
    <!-- 结算区 -->
    <div class="w-2/5 flex flex-col bg-gray-50">
      <!-- 订单列表 -->
      <div class="p-4 border-b border-gray-200 flex-shrink-0">
        <div class="flex justify-between items-center mb-3">
          <h2 class="text-lg font-bold text-gray-800">当前订单</h2>
          <button id="clearCartBtn" class="text-sm text-red-600 hover:text-red-800 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
            清空
          </button>
        </div>
        <div id="orderItems" class="max-h-[200px] overflow-y-auto">
          <div class="text-center text-gray-400 py-8">暂无商品，请添加</div>
        </div>
      </div>
      
      <!-- 小票预览 -->
      <div id="receiptPreview" class="flex-1 overflow-hidden flex flex-col border-b border-gray-200">
        <div class="p-4 border-b border-gray-200 flex justify-between items-center">
          <h2 class="text-lg font-bold text-gray-800">小票预览</h2>
          <button id="printReceiptBtn" class="text-sm text-gray-600 hover:text-gray-800 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
            </svg>
            打印
          </button>
        </div>
        <div id="receiptContent" class="p-4 bg-white m-4 rounded-lg shadow-inner flex-1 overflow-auto">
          <div class="text-center">
            <div class="font-bold text-lg mb-1">XX生活超市</div>
            <div class="text-xs text-gray-500 mb-3">电话: 400-888-8888</div>
            <div class="text-sm mb-2">收银员: {{ request.user.get_username }}</div>
            <div class="text-sm text-gray-600 mb-4">时间: {% now "Y-m-d H:i:s" %}</div>
          </div>
          <div class="border-t border-b border-gray-200 py-2 text-sm">
            <div class="flex justify-between font-medium">
              <span>商品</span>
              <span>数量×单价</span>
              <span>小计</span>
            </div>
          </div>
          <div id="receiptItems" class="py-2 text-sm">
            <div class="text-center text-gray-400 py-8">暂无商品</div>
          </div>
          <div id="receiptSummary" class="border-t border-gray-200 pt-3 text-sm hidden">
            <div class="flex justify-between py-1">
              <span>商品总数:</span>
              <span id="totalQuantity">0</span>
            </div>
            <div class="flex justify-between py-1">
              <span>总金额:</span>
              <span id="totalAmount">¥0.00</span>
            </div>
            <div class="flex justify-between py-1 text-red-500">
              <span>优惠:</span>
              <span id="totalDiscount">-¥0.00</span>
            </div>
            <div class="flex justify-between font-bold text-lg mt-2 pt-2 border-t border-gray-200">
              <span>应付:</span>
              <span id="payableAmount">¥0.00</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 结算操作 -->
      <div class="p-4">
        <div class="bg-gray-100 rounded-lg p-3 mb-4">
          <div class="flex justify-between items-center mb-1">
            <span class="text-gray-600">应付金额:</span>
            <span id="mainPayableAmount" class="text-xl font-bold text-blue-600">¥0.00</span>
          </div>
          <div id="changeContainer" class="hidden">
            <div class="flex justify-between text-sm text-gray-500">
              <span>实收:</span>
              <span id="receivedAmount">¥0.00</span>
            </div>
            <div class="flex justify-between text-sm font-medium">
              <span>找零:</span>
              <span id="changeAmount" class="text-green-600">¥0.00</span>
            </div>
          </div>
        </div>
        
        <div class="mb-4">
          <div class="grid grid-cols-4 gap-2 mb-2">
            <button class="payment-btn bg-blue-600 text-white py-2 rounded hover:bg-blue-700" data-type="member">
              会员
            </button>
            <button class="payment-btn bg-purple-600 text-white py-2 rounded hover:bg-purple-700" data-type="discount">
              折扣
            </button>
            <button class="payment-btn bg-yellow-600 text-white py-2 rounded hover:bg-yellow-700" data-type="coupon">
              优惠券
            </button>
            <button class="payment-btn bg-green-600 text-white py-2 rounded hover:bg-green-700" data-type="charge">
              挂单
            </button>
          </div>
          <div class="grid grid-cols-3 gap-2">
            <button class="payment-method-btn bg-white border border-gray-300 py-2 rounded hover:bg-gray-50" data-type="cash">
              <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="text-xs">现金</span>
              </div>
            </button>
            <button class="payment-method-btn bg-white border border-gray-300 py-2 rounded hover:bg-gray-50" data-type="card">
              <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                </svg>
                <span class="text-xs">银行卡</span>
              </div>
            </button>
            <button class="payment-method-btn bg-white border border-gray-300 py-2 rounded hover:bg-gray-50" data-type="mobile">
              <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                </svg>
                <span class="text-xs">手机支付</span>
              </div>
            </button>
          </div>
        </div>
        
        <button id="checkoutBtn" class="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 font-bold text-lg disabled:bg-gray-400 disabled:cursor-not-allowed" disabled>
          确认结算 (F1)
        </button>
      </div>
    </div>
  </div>
</div>
=======
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // 从 Django 模板上下文获取数据  
                // 下面去除，没发现不同
                
                const products = [
                            
                ]
>>>>>>> 0ac75087e5e07a3ef0624f7a4a9866c7346941b7

<!-- 支付模态框 -->
<div id="paymentModal" class="fixed inset-0 bg-black bg-opacity
{% endblock %}
